<template>
  <div class="aside">
    <el-menu default-active="1"
             class="el-menu-vertical-demo">
      <a v-for="item in menuItems"
         :key="item.index"
         @click="handleDialogFormVisible(item.title)">
        <el-menu-item :index="item.index">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.title}}</span>
          </template>
        </el-menu-item>
      </a>

    </el-menu>

    <el-button type="primary"
               icon="el-icon-download"
               @click.prevent="printResume"
               class="pring-btn">导出PDF</el-button>

    <!-- 信息编辑框 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogFormVisible"
               :before-close="handleDialogCancel">

      <!-- 基本信息填写区域 -->
      <div v-show="dialogTitle === '基础信息'">
        <el-form :model="primaryInfoForm">
          <el-form-item label="姓名"
                        :label-width="formLabelWidth">
            <el-input v-model="primaryInfoForm.name"
                      placeholder="输入姓名"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="个人介绍"
                        :label-width="formLabelWidth">
            <el-input v-model="primaryInfoForm.introduction"
                      placeholder="一句话介绍自己,告诉HR选择你的理由,建议不超过十五字"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true"
                 :model="primaryInfoForm"
                 class="demo-form-inline">
          <el-form-item label="年龄"
                        :label-width="formLabelWidth">
            <el-input-number v-model="primaryInfoForm.age"
                             :min="12"
                             :max="80"></el-input-number>
          </el-form-item>
          <el-form-item label="工作年限"
                        :label-width="formLabelWidth">
            <el-input-number v-model="primaryInfoForm.yearOfWork"
                             :min="0"
                             :max="40"></el-input-number>
          </el-form-item>

        </el-form>

        <el-form :model="primaryInfoForm">
          <el-form-item label="联系方式"
                        :label-width="formLabelWidth">
            <el-input v-model="primaryInfoForm.phone"
                      placeholder="输入联系方式"
                      autocomplete="off">
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱地址"
                        :label-width="formLabelWidth">
            <el-input v-model="primaryInfoForm.email"
                      placeholder="输入邮箱地址"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 求职意向填写区域 -->
      <div v-show="dialogTitle === '求职意向'">
        <el-form :model="preForm">
          <el-form-item label="是否展示"
                        :label-width="formLabelWidth">
            <el-switch v-model="preForm.isShow"
                       active-color="teal"
                       inactive-color="#909399">
            </el-switch>
          </el-form-item>
          <el-form-item style="margin-left:13px">
            <el-switch style="display: block"
                       v-model="preForm.isShowInPrimaryIfo"
                       :disabled="!preForm.isShow"
                       active-color="teal"
                       inactive-color="#909399"
                       active-text="顶部展示"
                       inactive-text="默认展示">
            </el-switch>

          </el-form-item>
          <el-form-item label="意向岗位"
                        :label-width="formLabelWidth">
            <el-input v-model="preForm.intendedPosition"
                      placeholder="请输入你想应聘的岗位吧！"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="意向城市"
                        :label-width="formLabelWidth">
            <div class="block">
              <el-cascader expand-trigger="hover"
                           :options="ereaData"
                           v-model="selectedCity">
              </el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="薪资要求"
                        :label-width="formLabelWidth">
            <el-select v-model="preForm.intendedSalary"
                       clearable
                       placeholder="请选择">
              <el-option v-for="item in salaryData"
                         :key="item.value"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职时间"
                        :label-width="formLabelWidth">
            <el-select v-model="preForm.entryTime"
                       clearable
                       placeholder="请选择">
              <el-option v-for="item in entryTimeData"
                         :key="item.value"
                         :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>

        </el-form>
      </div>

      <!-- 教育背景填写区域 -->
      <div v-show="dialogTitle === '教育背景'">
        <el-form>
          <el-form-item label="是否展示"
                        :label-width="formLabelWidth">
            <el-switch v-model="eduIsShow"
                       active-color="teal"
                       inactive-color="#909399">
            </el-switch>
          </el-form-item>
        </el-form>

        <!-- 这里开始遍历所添加的教育背景理论上可无限个 -->
        <div v-for="(edu,index) in eduForm"
             :key="index">
          <el-form :model="edu">

            <el-form-item label="就读学校"
                          :label-width="formLabelWidth">
              <el-input v-model="edu.school"
                        placeholder="请输入就读学校如北京大学(本科)、中国人民大学(研究生)"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="修读专业"
                          :label-width="formLabelWidth">
              <el-input v-model="edu.major"
                        placeholder="请输入修读专业如计算机科学与技术、金融学"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="就读时间"
                          :label-width="formLabelWidth">
              <el-date-picker v-model="edu.studyTime"
                              type="monthrange"
                              align="center"
                              unlink-panels
                              range-separator="至"
                              start-placeholder="开始月份"
                              end-placeholder="结束月份"
                              format="yyyy 年 MM 月"
                              value-format="yyyy.MM">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="补充(可选)"
                          :label-width="formLabelWidth">
              <el-input type="textarea"
                        autosize
                        placeholder="简洁,突出重点,如:GPA:3.72/4(专业前10%),建议分点填写,回车可换行"
                        v-model="edu.description">
              </el-input>
            </el-form-item>
            <hr>

          </el-form>
        </div>
        <el-button @click="addFormItem(dialogTitle)">新增教育背景</el-button>
        <el-button type="info"
                   @click="removeFormItem(dialogTitle)">删除教育背景</el-button>
        <el-button @click="restoreFormItem(dialogTitle)">恢复上次提交数据</el-button>

      </div>

      <!-- 工作经验填写区域 -->
      <div v-show="dialogTitle === '工作经验'">
        <el-form>
          <el-form-item label="是否展示"
                        :label-width="formLabelWidth">
            <el-switch v-model="expIsShow"
                       active-color="teal"
                       inactive-color="#909399">
            </el-switch>
          </el-form-item>
        </el-form>

        <!-- 这里开始遍历所添加的工作经验理论上可无限个 -->
        <div v-for="(exp,index) in expForm"
             :key="index">
          <el-form :model="exp">

            <el-form-item label="工作公司"
                          :label-width="formLabelWidth">
              <el-input v-model="exp.company"
                        placeholder="请输入工作公司如杭州阿里巴巴网络技术有限公司"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作岗位"
                          :label-width="formLabelWidth">
              <el-input v-model="exp.position"
                        placeholder="请输入工作岗位如web前端工程师"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作时间"
                          :label-width="formLabelWidth">
              <el-date-picker v-model="exp.workTime"
                              type="monthrange"
                              align="center"
                              unlink-panels
                              range-separator="至"
                              start-placeholder="开始月份"
                              end-placeholder="结束月份"
                              format="yyyy 年 MM 月"
                              value-format="yyyy.MM">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="工作描述"
                          :label-width="formLabelWidth">
              <el-input type="textarea"
                        autosize
                        placeholder="详细描述你的职责范围、工作任务及取得成绩,建议分点填写,回车即可换行"
                        v-model="exp.description">
              </el-input>
            </el-form-item>
            <hr>

          </el-form>
        </div>
        <el-button @click="addFormItem(dialogTitle)">新增工作经验</el-button>
        <el-button type="info"
                   @click="removeFormItem(dialogTitle)">删除工作经验</el-button>
        <el-button @click="restoreFormItem(dialogTitle)">恢复上次提交数据</el-button>

      </div>

      <!-- 项目经验填写区域 -->
      <div v-show="dialogTitle === '项目经验'">
        <el-form>
          <el-form-item label="是否展示"
                        :label-width="formLabelWidth">
            <el-switch v-model="proIsShow"
                       active-color="teal"
                       inactive-color="#909399">
            </el-switch>
          </el-form-item>
        </el-form>
        <!-- 这里开始遍历所添加的项目经验理论上可无限个 -->
        <div v-for="(pro,index) in proForm"
             :key="index">
          <el-form :model="pro">

            <el-form-item label="项目名称"
                          :label-width="formLabelWidth">
              <el-input v-model="pro.progrom"
                        placeholder="请输入负责的具体项目"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主要职责"
                          :label-width="formLabelWidth">
              <el-input v-model="pro.position"
                        placeholder="请描述你负责的项目部分及职责如前端工程师、前端负责人等"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目时间"
                          :label-width="formLabelWidth">
              <el-date-picker v-model="pro.programTime"
                              type="monthrange"
                              align="center"
                              unlink-panels
                              range-separator="至"
                              start-placeholder="开始月份"
                              end-placeholder="结束月份"
                              format="yyyy 年 MM 月"
                              value-format="yyyy.MM">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="项目描述"
                          :label-width="formLabelWidth">
              <el-input type="textarea"
                        autosize
                        placeholder="详细描述你的职责范围、工作任务及取得成绩,建议分点填写,回车即可换行"
                        v-model="pro.description">
              </el-input>
            </el-form-item>
            <hr>

          </el-form>
        </div>
        <el-button @click="addFormItem(dialogTitle)">新增项目经验</el-button>
        <el-button type="info"
                   @click="removeFormItem(dialogTitle)">删除项目经验</el-button>
        <el-button @click="restoreFormItem(dialogTitle)">恢复上次提交数据</el-button>
      </div>

      <!-- 荣誉证书填写区域 -->
      <div v-show="dialogTitle === '荣誉证书'">
        <el-form>
          <el-form-item label="是否展示"
                        :label-width="formLabelWidth">
            <el-switch v-model="cerIsShow"
                       active-color="teal"
                       inactive-color="#909399">
            </el-switch>
          </el-form-item>
          <el-form-item label="荣誉证书"
                        :label-width="formLabelWidth">
            <el-input type="textarea"
                      autosize
                      placeholder="请输入所获得的荣誉证书等，建议分点填写，回车即可换行"
                      v-model="cerDescription">
            </el-input>
          </el-form-item>
        </el-form>
        <el-button @click="restoreFormItem(dialogTitle)">恢复上次提交数据</el-button>
      </div>

      <!-- 自我评价填写区域 -->
      <div v-show="dialogTitle === '自我评价'">
        <el-form>
          <el-form-item label="是否展示"
                        :label-width="formLabelWidth">
            <el-switch v-model="evaIsShow"
                       active-color="teal"
                       inactive-color="#909399">
            </el-switch>
          </el-form-item>
          <el-form-item label="自我评价"
                        :label-width="formLabelWidth">
            <el-input type="textarea"
                      autosize
                      placeholder="请输入自我评价，回车即可换行"
                      v-model="evaDescription">
            </el-input>
          </el-form-item>
        </el-form>
        <el-button @click="restoreFormItem(dialogTitle)">恢复上次提交数据</el-button>
      </div>

      <div slot="footer"
           class="dialog-footer">
        <el-button @click="handleDialogCancel">取 消</el-button>
        <el-button type="primary"
                   @click="handleInfoChange">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { provinceAndCityData, CodeToText } from "element-china-area-data";

export default {
  name: "TheAside",
  data() {
    return {
      menuItems: [
        {
          index: "1",
          icon: "el-icon-info",
          title: "基础信息"
        },
        {
          index: "2",
          icon: "el-icon-edit",
          title: "求职意向"
        },
        {
          index: "3",
          icon: "el-icon-tickets",
          title: "教育背景"
        },
        {
          index: "4",
          icon: "el-icon-document",
          title: "工作经验"
        },
        {
          index: "5",
          icon: "el-icon-setting",
          title: "项目经验"
        },
        {
          index: "6",
          icon: "el-icon-star-on",
          title: "荣誉证书"
        },
        {
          index: "7",
          icon: "el-icon-edit-outline",
          title: "自我评价"
        }
      ],
      dialogFormVisible: false,
      dialogTitle: "",
      primaryInfoForm: {
        name: "",
        introduction: "",
        age: 18,
        yearOfWork: 1,
        phone: "",
        email: ""
      },
      preForm: {
        isShow: false,
        isShowInPrimaryIfo: false,
        intendedPosition: "",
        intendedCity: "",
        intendedSalary: "",
        entryTime: ""
      },
      eduIsShow: true,
      eduForm: [
        {
          school: "",
          major: "",
          studyTime: [],
          description: ""
        }
      ],
      expIsShow: true,
      expForm: [
        {
          company: "",
          position: "",
          workTime: [],
          description: ""
        }
      ],
      proIsShow: true,
      proForm: [
        {
          progrom: "",
          position: "",
          programTime: [],
          description: ""
        }
      ],
      cerIsShow: true,
      cerDescription: "",
      evaIsShow: true,
      evaDescription: "",
      ereaData: provinceAndCityData,
      selectedCity: [],
      salaryData: [
        {
          value: "3K-5K"
        },
        {
          value: "5K-8K"
        },
        {
          value: "8K-12K"
        },
        {
          value: "12K-15K"
        },
        {
          value: "15K-20K"
        },
        {
          value: "20K以上"
        },
        {
          value: "面议"
        }
      ],
      entryTimeData: [
        {
          value: "可立即到岗"
        },
        {
          value: "一周后"
        },
        {
          value: "两周后"
        },
        {
          value: "一个月后"
        },
        {
          value: "面议"
        }
      ],
      formLabelWidth: "80px"
    };
  },
  methods: {
    // 处理展示
    handleDialogFormVisible(title) {
      this.dialogTitle = title;
      this.dialogFormVisible = true;
    },

    // 处理填写信息的提交
    handleInfoChange() {
      this.dialogFormVisible = false;
      if (this.dialogTitle === "基础信息") {
        this.$store.commit("handleChangePrimaryInfo", this.primaryInfoForm);
      } else if (this.dialogTitle === "求职意向") {
        this.preForm.intendedCity =
          this.selectedCity.length === 0
            ? ""
            : CodeToText[this.selectedCity[0]] +
              CodeToText[this.selectedCity[1]];
        this.$store.commit("handleChangePreference", this.preForm);
      } else if (this.dialogTitle === "教育背景") {
        //必须进行深拷贝，否则将会使用同一个内存地址就会出现未经mutation就修改数据的错误操作
        let _eduForm = JSON.parse(JSON.stringify(this.eduForm));
        for (let i = 0; i < _eduForm.length; i++) {
          _eduForm[i].description = _eduForm[i].description
            .replace(/\r\n/g, "<br/>")
            .replace(/\n/g, "<br/>")
            .replace(/\s/g, "&nbsp;");
        }
        this.$store.commit("handleChangeEdu", {
          eduIsShow: this.eduIsShow,
          eduForm: _eduForm
        });
      } else if (this.dialogTitle === "工作经验") {
        //必须进行深拷贝，否则将会使用同一个内存地址就会出现未经mutation就修改数据的错误操作
        let _expForm = JSON.parse(JSON.stringify(this.expForm));
        for (let i = 0; i < _expForm.length; i++) {
          _expForm[i].description = _expForm[i].description
            .replace(/\r\n/g, "<br/>")
            .replace(/\n/g, "<br/>")
            .replace(/\s/g, "&nbsp;");
        }
        this.$store.commit("handleChangeExp", {
          expIsShow: this.expIsShow,
          expForm: _expForm
        });
      } else if (this.dialogTitle === "项目经验") {
        //必须进行深拷贝，否则将会使用同一个内存地址就会出现未经mutation就修改数据的错误操作
        let _proForm = JSON.parse(JSON.stringify(this.proForm));
        for (let i = 0; i < _proForm.length; i++) {
          _proForm[i].description = _proForm[i].description
            .replace(/\r\n/g, "<br/>")
            .replace(/\n/g, "<br/>")
            .replace(/\s/g, "&nbsp;");
        }
        this.$store.commit("handleChangePro", {
          proIsShow: this.proIsShow,
          proForm: _proForm
        });
      } else if (this.dialogTitle === "荣誉证书") {
        let _cerDescription = this.cerDescription
          .replace(/\r\n/g, "<br/>")
          .replace(/\n/g, "<br/>")
          .replace(/\s/g, "&nbsp;");
        this.$store.commit("handleChangeCer", {
          cerIsShow: this.cerIsShow,
          cerDescription: _cerDescription
        });
      } else if (this.dialogTitle === "自我评价") {
        let _evaDescription = this.evaDescription
          .replace(/\r\n/g, "<br/>")
          .replace(/\n/g, "<br/>")
          .replace(/\s/g, "&nbsp;");
        this.$store.commit("handleChangeEva", {
          evaIsShow: this.evaIsShow,
          evaDescription: _evaDescription
        });
      }
    },

    //处理取消后的操作
    handleDialogCancel() {
      this.dialogFormVisible = false;
    },

    //新增表单项总方法
    addFormItem(dialogTitle) {
      if (dialogTitle === "教育背景") {
        this.eduForm.push({
          school: "",
          major: "",
          studyTime: [],
          description: ""
        });
      } else if (dialogTitle === "工作经验") {
        this.expForm.push({
          company: "",
          position: "",
          workTime: [],
          description: ""
        });
      } else if (dialogTitle === "项目经验") {
        this.proForm.push({
          progrom: "",
          position: "",
          programTime: [],
          description: ""
        });
      } else if (dialogTitle === "荣誉证书") {
        this.cerForm.push({
          description: ""
        });
      }
    },
    //删除所在表单信息，从下往上删除
    removeFormItem(dialogTitle) {
      if (dialogTitle === "教育背景") {
        this.eduForm.pop();
      } else if (dialogTitle === "工作经验") {
        this.expForm.pop();
      } else if (dialogTitle === "项目经验") {
        this.proForm.pop();
      } else if (dialogTitle === "荣誉证书") {
        this.cerForm.pop();
      }
    },
    //根据不同项还原上次保存的表单信息
    restoreFormItem(dialogTitle) {
      if (dialogTitle === "教育背景") {
        let _eduFromStore = JSON.parse(
          JSON.stringify(this.$store.state.resumeItems[1].content)
        );
        this.eduForm = _eduFromStore;
      } else if (dialogTitle === "工作经验") {
        let _expFromStore = JSON.parse(
          JSON.stringify(this.$store.state.resumeItems[2].content)
        );
        this.expForm = _expFromStore;
      } else if (dialogTitle === "项目经验") {
        let _proFromStore = JSON.parse(
          JSON.stringify(this.$store.state.resumeItems[3].content)
        );
        this.proForm = _proFromStore;
      } else if (dialogTitle === "荣誉证书") {
        let _cerDescription = JSON.parse(
          JSON.stringify(this.$store.state.resumeItems[4].content)
        );
        this.cerDescription = _cerDescription;
      } else if (dialogTitle === "自我评价") {
        let _evaDescription = JSON.parse(
          JSON.stringify(this.$store.state.resumeItems[5].content)
        );
        this.evaDescription = _evaDescription;
      }
    },
    printResume() {
      this.$confirm(
        "导出为PDF操作如下：选择“目标打印机”→“更改”→“另存为PDF”；布局选择“纵向”；点击“更多设置”，去掉“页眉页脚”，(勾上“背景图形”)，最后点击保存即可另存为完美的PDF简历",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }
      ).then(() => {
        this.$emit("print-resume");
      });
    }
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
.aside {
  .pring-btn {
    margin: 10px 10px;
  }
}
</style>


